<template>
	<div class="card art-custom-card" shadow="never" :style="{ height: containerMinHeight }" >
		<div class="card-header" style="display: flex;justify-content: space-between;align-items: center;">
			<div >
				<i class="iconfont-sys">&#xe6ba;</i>
				<span style="margin-left: 5px;">规则目录树</span>
			</div>
		</div>
		
		<div style="height: calc(100% - 54px);overflow-y: hidden;">
 			<el-scrollbar style="height: calc(100% - 54px)" >
				<el-tree
					:data="ruleTreeData"
					ref="ruleTree"
					node-key="id"
					default-expand-all
					:expand-on-click-node="false"
					@node-click="handleNodeClick"
					:props="defaultProps"
					:highlight-current="true"
				  >
					<template #default="{ node, data }">
					  <div class="custom-tree-node">
						<span>{{ node.label }}</span>
					  </div>
					</template>
				</el-tree>
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElDialog, FormInstance, ElTag } from 'element-plus'
import type { FormRules } from 'element-plus'
import { ElButton } from 'element-plus'
import type { RenderContentContext, RenderContentFunction } from 'element-plus'
import { useCommon } from '@/composables/useCommon'
import { RuleService } from '@/api/data-rule/ruleApi'
const emits = defineEmits(['node-click'])
const { containerMinHeight } = useCommon()
const loading = ref(false)
const defaultProps = {
  children: 'children',
  label: 'name',
}

const ruleTreeRef=ref();
const handleNodeClick=(data: any)=>{
  emits('node-click', data)
}

const ruleTreeData = ref<any[]>([])
//规则树数据
const getTableData = async () => {
	loading.value = true
	const data = await RuleService.getLoadAll({});
	ruleTreeData.value =data;
	loading.value = false
}

const refresh=(data:any)=>{
	getTableData();
	if(ruleTreeRef.value){
		ruleTreeRef.value.setCurrentNode(data.id);
	}
}

defineExpose({
	refresh
});

onMounted(() => {
	getTableData()
})
</script>

<style lang="scss" scoped>
	.custom-tree-node {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  font-size: 14px;
	  padding-right: 8px;
	}

	.btn {
	  width: 42px;
	  height: 42px;
	  line-height: 42px;
	  text-align: center;
	  cursor: pointer;
	  border-radius: 50%;
	  transition: background-color 0.2s ease;

	  &:hover {
		background-color: var(--art-gray-200);
	  }

	  i {
		font-size: 20px;
		color: var(--art-text-gray-700);
	  }
	}
	
	.el-card__header{
		background-color: green !important;
	}
	
	.custom-tree-card-body{
		padding:0px !important;
		background-color: antiquewhite !important;
	}
</style>
